<template>
  <view class="help-list">
    <view class="help-item" v-for="item in helpList" :key="item.key" @click="openHelp(item)">
      <text class="icon" :class="item.icon"></text>
      <text class="title">{{ item.name }}</text>
    </view>
  </view>
</template>

<script>
import cms from '@/utils/cms.js'
import { getDocPath, getFileExt } from '@/utils/index.js'
import { CONFIG } from '@/envs/_/config'
import { DOC_EXT } from '@/constant/index.js'
import mixin from '@/mixins/index.js'
export default {
  mixins: [mixin],
  data() {
    return {
      acceptFileExt: [].concat(DOC_EXT.PDF),
      helpList: [],
      fileMap: {}
    }
  },
  onPullDownRefresh() {
    this.getHelpList()
  },
  mounted() {
    this.getHelpList()
  },
  methods: {
    getHelpList() {
      const self = this
      const target = cms.graphQL.queryHelps
      uni.request({
        url: target.url,
        method: 'POST',
        data: {
          query: target.query,
          variables: {
            appid: CONFIG.WX_APPID,
          },
        },
        success(result) {
          if (Array.isArray(result.data?.data?.[target.column])) {
            const arr = []
            let targetItem
            result.data.data[target.column].forEach(item => {
              const fileExt = getFileExt(item.doc?.publicUrl)
              const helpItem = {
                name: item.name || '',
                key: item.id,
                id: item.id,
                recommend: !!item.recommend,
                typeName: item.type?.name || '',
                ext: fileExt,
                isRichText: !self.acceptFileExt.includes(fileExt),
                icon: self.getFileIcon(fileExt),
                docPath: getDocPath(item.doc?.publicUrl),
                tempFilePath: self.fileMap[item.docPath]
              }
              helpItem.tempFilePath = self.fileMap[helpItem.docPath] || ''
              arr.push(helpItem)
              if (!targetItem && helpItem.recommend) {
                targetItem = helpItem
              }
            })
            self.helpList = arr

            if (self.params.videoId) {
              self.openHelp(targetItem)
            }
          }
        },
        complete() {
          uni.stopPullDownRefresh()
        }
      })
    },
    getFileIcon(ext) {
      if (DOC_EXT.PDF.includes(ext)) return 'iconfont icon-pdf'
      if (DOC_EXT.WORD.includes(ext)) return 'iconfont icon-word'
      if (DOC_EXT.EXCEL.includes(ext)) return 'iconfont icon-excel'
      if (DOC_EXT.PPT.includes(ext)) return 'iconfont icon-ppt'
      return 'iconfont icon-richtext'
    },
    openHelp(target) {
      const self = this
      if (target.isRichText) {
        self.toHelpDetail(target)
        return
      }
      if (target.tempFilePath) {
        uni.openDocument({
          filePath: target.tempFilePath,
          fileType: target.ext,
          showMenu: true,
          fail(e) {
            uni.showToast({
              icon: 'none',
              title: '打开文件失败'
            })
            console.error('打开文件失败：', e)
          }
        })
        return
      }

      uni.showLoading()
      uni.downloadFile({
        url: target.docPath,
        success(res) {
          uni.hideLoading()
          target.tempFilePath = res.tempFilePath
          self.fileMap[target.docPath] = res.tempFilePath
          uni.openDocument({
            filePath: target.tempFilePath,
            fileType: target.ext,
            showMenu: true,
            fail(e) {
              console.error('打开文件失败：', e)
            }
          })
        },
        fail(e) {
          uni.hideLoading()
          uni.showToast({
            icon: 'none',
            title: '下载文件失败'
          })
          console.error('下载文件失败：', e)
        }
      })
    },
    toHelpDetail(target) {
      uni.navigateTo({
        url: `/pages/me/help-detail/help-detail?id=${target.id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.help-list {
  padding: 30rpx;
}
.help-item {
  background-color: $white;
  position: relative;
  padding: 30rpx 30rpx 30rpx 80rpx;
  display: flex;
  align-items: center;
  font-size: $font-size-4;
  border-radius: 10rpx;
  margin-top: 30rpx;
  &:first-child {
    margin-top: 0;
  }
  .icon {
    position: absolute;
    left: 20rpx;
    font-size: 50rpx;
    &.icon-pdf {
      color: $warning;
    }
    &.icon-word {
      color: $primary;
    }
    &.icon-excel {
      color: $success;
    }
    &.icon-ppt {
      color: $danger;
    }
    &.icon-richtext {
      color: $danger;
    }
  }
}
</style>
